<template>
  <div class="wrap">
    <div class="top-wrap">
      <el-row>
        <el-col :span="6">
          <img src="@/assets/images/page2/title-icon.png" alt="" />
          <p class="venue-name">
            武汉市洪山体育馆
          </p>
        </el-col>
        <el-col :span="6">
          <p class="value-text">
            <span>今日收入</span>
            {{ dayIncome }}元
          </p>
        </el-col>
        <el-col :span="6">
          <p class="value-text">
            <span>今日入场人次</span>
            {{todayNum}}人
          </p>
        </el-col>
        <el-col :span="6">
          <p class="day-text">
            {{ year }}年{{ month + 1 }}月{{ day }}日 {{ week }}
          </p>
        </el-col>
      </el-row>
    </div>
    <div class="main-wrap">
      <div class="left-wrap">
        <div class="title-wrap">
          <p>
            营收统计分析
            <span>元</span>
          </p>
        </div>
        <div class="content-container" id="chart1"></div>
      </div>
      <div class="right-wrap">
        <div class="title-wrap">
          <p>
            客流统计分析
            <span>个</span>
          </p>
        </div>
        <div class="content-container" id="chart2"></div>
      </div>
      <div class="left-wrap">
        <div class="title-wrap">
          <p>
            人群统计
          </p>
        </div>
        <div class="content-container" id="chart3"></div>
      </div>
      <div class="right-wrap">
        <div class="title-wrap">
          <p>
            职业分布
          </p>
        </div>
        <div class="content-container" id="chart4"></div>
      </div>
    </div>
  </div>
</template>
<script>
var echarts = require("echarts");

export default {
  data() {
    return {
      dayIncome: 0,
      option1: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: ["2029年"],
          textStyle: {
            color: "#fff"
          }
        },
        textStyle: {
          color: "#fff"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月"
            ]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "2020年",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [
              1220,
              1432,
              1051,
              1634,
              9705,
              2390,
              2410,
              6107,
              7102,
              8002,
              7098,
              9035
            ]
          }
        ]
      },
      option2: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: ["客流分析"],
          textStyle: {
            color: "#fff"
          }
        },
        textStyle: {
          color: "#fff"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "客流分析",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      },
      option3: {
        xAxis: {
          type: "category",
          data: ["14岁以下", "14-28岁", "28-35岁", "35-65岁", "65岁以上"]
        },
        yAxis: {
          type: "value"
        },
        textStyle: {
          color: "#fff"
        },
        series: [
          {
            data: [120, 200, 150, 80, 70],
            type: "bar",
            barWidth: 30
          }
        ]
      },
      option4: {
        tooltip: {},
        textStyle: {
          color: "#fff"
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: [
            { name: "销售（sales）", max: 6500 },
            { name: "管理（Administration）", max: 16000 },
            { name: "信息技术（Information Techology）", max: 30000 },
            { name: "客服（Customer Support）", max: 38000 },
            { name: "研发（Development）", max: 52000 },
            { name: "市场（Marketing）", max: 25000 }
          ]
        },
        series: [
          {
            name: "职业分布",
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
              {
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: "职业分布"
              }
            ]
          }
        ]
      },
      todayNum: 0,
    };
  },
  methods: {
    setChart1() {
      var myChart = echarts.init(document.getElementById("chart1"));
      myChart.setOption(this.option1);
    },
    setChart2() {
      var myChart = echarts.init(document.getElementById("chart2"));
      myChart.setOption(this.option2);
    },
    setChart3() {
      var myChart = echarts.init(document.getElementById("chart3"));
      myChart.setOption(this.option3);
    },
    setChart4() {
      var myChart = echarts.init(document.getElementById("chart4"));
      myChart.setOption(this.option4);
    },
    openWebsocket9004() {
      const wsServer =
        process.env.NODE_ENV === "development"
          ? `ws://101.37.205.208:9004/websocket/1`
          : `ws://101.37.205.208:9004/websocket/1`; // 服务器地址
      const websocket = new WebSocket(wsServer); // 创建WebSocket对象
      websocket.onmessage = evt => {
        try {
          let data = JSON.parse(evt.data);
          if (data.type === 1) {
            this.dayIncome = data.data.totalPrice;
          } else if (data.type === 2) {
            let arr = [];
            arr.push(data.data[0].january);
            arr.push(data.data[0].february);
            arr.push(data.data[0].march);
            arr.push(data.data[0].april);
            arr.push(data.data[0].may);
            arr.push(data.data[0].june);
            arr.push(data.data[0].july);
            arr.push(data.data[0].august);
            arr.push(data.data[0].september);
            arr.push(data.data[0].october);
            arr.push(data.data[0].november);
            arr.push(data.data[0].december);
            this.option1.series[0].data = arr;
            this.setChart1();
          }
        } catch (e) {
          console.log(e)
        }
      };
    },
    openWebsocket8003() {
      const wsServer =
        process.env.NODE_ENV === "development"
          ? `ws://192.168.10.127:8003/websocket/8003`
          : `ws://101.37.205.208:9004/websocket/1`; // 服务器地址
      const websocket = new WebSocket(wsServer); // 创建WebSocket对象
      websocket.onmessage = evt => {
        try {
          let data = JSON.parse(evt.data);
          console.log(data)
          if (data.type === '2') {
            this.todayNum = data.today
            const arr = [data.monday, data.tuesday, data.wednesday,data.thursday,data.friday,data.saturday, data.sunday]
            this.option2.series[0].data = arr.map(item => Number(item))
            this.setChart2()
          }
        } catch (e) {
          console.log(e)
        }
      };
    }
  },
  computed: {
    year() {
      return new Date().getFullYear();
    },
    month() {
      return new Date().getMonth();
    },
    day() {
      return new Date().getDate();
    },
    week() {
      const arr = [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期七"
      ];
      return arr[new Date().getDay() - 1];
    }
  },
  mounted() {
    this.setChart1();
    this.setChart2();
    this.setChart3();
    this.setChart4();
    this.openWebsocket9004();
    this.openWebsocket8003();
  }
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
}

.wrap {
  width: 100vw;
  height: 100vh;
  background: url("../../../assets/images/page2/left-screen-background.png");
  background-size: 100% 100%;

  .top-wrap {
    width: 1900px;
    height: 106px;
    margin-left: 20px;
    border-top: 20px solid rgba(0, 0, 0, 0);
    background: url("../../../assets/images/page2/top-background-left.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;

    img {
      float: left;
      width: 56px;
      height: 56px;
      margin-top: 25px;
      margin-left: 66px;
    }

    .venue-name {
      font-size: 40px;
      font-family: SourceHanSansSC-Medium, SourceHanSansSC;
      font-weight: 500;
      color: rgba(10, 165, 255, 1);
      line-height: 106px;
      float: left;
      margin-left: 20px;
    }

    .value-text {
      font-size: 40px;
      font-family: SourceHanSansSC-Medium, SourceHanSansSC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 106px;
      text-align: center;

      span {
        font-size: 24px;
        font-family: SourceHanSansSC-Medium, SourceHanSansSC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 106px;
        margin-right: 20px;
      }
    }

    .day-text {
      text-align: center;
      font-size: 26px;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      color: rgba(10, 165, 255, 1);
      line-height: 106px;
    }
  }

  .left-wrap {
    width: 970px;
    height: 354px;
    border-radius: 8px;
    background: url("../../../assets/images/value-wrap-background.png");
    background-size: 100% 100%;
    float: left;
    border-radius: 8px;
    margin-top: 56px;
    margin-left: 70px;
    margin-right: 60px;

    .title-wrap {
      font-size: 22px;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      height: 60px;
      line-height: 60px;
      border-bottom: 1px dotted #00b6c7;
      text-align: left;
      text-indent: 30px;

      span {
        float: right;
        margin-right: 30px;
      }
    }
  }

  .right-wrap {
    width: 774px;
    height: 354px;
    border-radius: 8px;
    background: url("../../../assets/images/value-wrap-background.png");
    background-size: 100% 100%;
    float: left;
    margin-top: 56px;

    .title-wrap {
      font-size: 22px;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      height: 60px;
      line-height: 60px;
      border-bottom: 1px dotted #00b6c7;
      text-align: left;
      text-indent: 30px;

      span {
        float: right;
        margin-right: 30px;
      }
    }
  }

  .content-container {
    width: 100%;
    height: 300px;
  }
}
</style>
